<template>
  <div class="page-container">
    <div>
      <!--工具栏-->
      <div class="toolbar">
        <el-form :inline="true" label-position="right" :model="filters" :size="size" ref="filters">
          <el-row class="search-input">
            <el-form-item prop="supplierName" label="供应商名称：">
              <el-input v-model="filters.supplierName" placeholder="供应商名称" style="width:215px"></el-input>
            </el-form-item>
            <el-form-item prop="supplierMnemonicCode" label="供应商编码：">
              <el-input v-model="filters.supplierMnemonicCode" placeholder="供应商编码"></el-input>
            </el-form-item>
            <el-form-item prop="purchasingMethod" label="采购方式：">
              <el-select v-model="filters.purchasingMethod" placeholder="采购方式" style="width:215px">
                <el-option label="普通采购" value="0"></el-option>
                <el-option label="集团采购" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="status" label="状态：">
                <el-select v-model="filters.status" placeholder="状态" style="width:215px">
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="关闭" value="2"></el-option>
                  <el-option label="待审核" value="3"></el-option>
                  <el-option label="审核拒绝" value="4"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="source" label="来源：">
                <el-select v-model="filters.source" placeholder="来源" style="width:215px">
                  <el-option label="自建" value="1"></el-option>
                  <el-option label="入驻" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="startTime" label="创建时间：" label-width="96px">
                <el-date-picker 
                v-model="filters.startTime" 
                type="datetime" 
                placeholder="创建开始时间"
                :picker-options="startDateDisabled"
                @change="changeStartDate">
                </el-date-picker>
              </el-form-item>
              <span>至</span>
              <el-form-item prop="endTime">
                <el-date-picker 
                v-model="filters.endTime" 
                type="datetime" 
                placeholder="创建结束时间"
                :picker-options="endDateDisabled"
                @change="changeendDate">
                </el-date-picker>
              </el-form-item>
          </el-row>
          <el-row class="search-button">
            <el-form-item>
              <kt-button
                icon="fa fa-search"
                :label="$t('action.search')"
                type="primary"
                @click="findPage(null)"
              />
            </el-form-item>
            <el-form-item>
              <kt-button
                icon="fa fa-reset"
                :label="$t('action.reset')"
                type="primary"
                @click="resetForm('filters')"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="addSupplier()" class="h30">新增</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <!--表格内容栏-->
      <el-table
        :data="supplierList"
        v-loading="supplierListLoading"
        style="width:100%;"
        :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
      >
        <el-table-column label="ID" prop="id" width="120" align="center"></el-table-column>
        <el-table-column label="商家名称" prop="merchantName" width="120" align="center"></el-table-column>
        <el-table-column label="供应商编码" prop="supplierMnemonicCode" width="120" align="center"></el-table-column>
        <el-table-column label="交易币别" prop="transactionCurrency" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.transactionCurrency==1">CNY</span>
            <span v-if="scope.row.transactionCurrency==2">AUD</span>
            <span v-if="scope.row.transactionCurrency==3">USD</span>
            <span v-if="scope.row.transactionCurrency==4">GBP</span>
          </template>
        </el-table-column>
        <el-table-column label="供应商名称" prop="supplierName" width="120" align="center"></el-table-column>
        <el-table-column label="公司名称" prop="companyName" width="120" align="center"></el-table-column>
        <el-table-column label="采购方式" prop="purchasingMethod" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.purchasingMethod==0">普通采购</span>
            <span v-else>集团采购</span>
          </template>
        </el-table-column>
        <el-table-column label="主营品类" prop="mainCategories" width="120" align="center"></el-table-column>
        <el-table-column label="状态" prop="status" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status==1">启用</span>
            <span v-if="scope.row.status==2">关闭</span>
            <span v-if="scope.row.status==3">待审核</span>
            <span v-if="scope.row.status==4">审核拒绝</span>
          </template>
        </el-table-column>
        <el-table-column label="数据来源" prop="source" width="120" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.source==1">自建</span>
            <span v-else>入驻</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="120" align="center"></el-table-column>
        <el-table-column label="备注" prop="remarks" width="120" align="center"></el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" v-if="scope.row.status != 3 && scope.row.status != 4" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="info" @click="handleView(scope.row)">查看</el-button>
            <el-button size="mini" type="info" v-if="(scope.row.status == 3 || scope.row.status == 4) && scope.row.source == 2" @click="handleChangeStatus(scope.row,1)">审核通过</el-button>
            <el-button size="mini" type="info" v-if="(scope.row.status == 3) && scope.row.source == 2" @click="handleChangeStatus(scope.row,4)">审核拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页栏-->
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, prev, pager, next, jumper,sizes"
          @current-change="refreshPageRequest"
          :current-page="filters.pageNum"
          :page-size="filters.pageSize"
          :total="totalSize"
          style="float:right;"
          :page-sizes="[5,10, 20, 30, 40]"
          @size-change="handleSizeChange"
        ></el-pagination>
      </div>
      <!--新增编辑界面-->
      <el-dialog
        title="选择商家"
        width="80%"
        :visible.sync="editDialogVisible"
        :close-on-click-modal="false"
      >
        <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
          <el-form :inline="true" :model="merchantFilter" :size="size" ref="merchantFilter">
            <el-row class="search-input">
              <el-form-item prop="orgNumber" label="商家编码：">
                <el-input v-model="merchantFilter.orgNumber" placeholder="商家编码"></el-input>
              </el-form-item>
              <el-form-item prop="name" label="商家名称：">
                <el-input v-model="merchantFilter.name" placeholder="商家名称"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item>
                <kt-button
                  icon="fa fa-search"
                  :label="$t('action.search')"
                  type="primary"
                  @click="findPageTable(null)"
                />
              </el-form-item>
            </el-row>
          </el-form>
        </div>
        <!--表格内容栏-->
        <el-table
          :data="merchantList"
          :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
          @current-change="handleCurrentChange"
          highlight-current-row
          v-loading="merchantListLoading"
        >
          <el-table-column type="index" width="55"></el-table-column>
          <el-table-column label="商家编码" prop="orgNumber"></el-table-column>
          <el-table-column label="商家名称" prop="name"></el-table-column>
          <el-table-column label="商家类型" prop="merchantType">
            <template slot-scope="scope">
              <span v-if="scope.row.merchantType==1">自营</span>
              <span v-if="scope.row.merchantType==2">第三方商户</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="toolbar" style="padding:10px;">
          <el-pagination
            layout="total, prev, pager, next, jumper,sizes"
            @current-change="refreshMerchantPageRequest"
            :current-page="merchantFilter.start"
            :page-size="merchantFilter.limit"
            :total="merchantTotal"
            style="float:right;"
            :page-sizes="[5,10, 20, 30, 40]"
            @size-change="handleMerchantSizeChange"
          ></el-pagination>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";

export default {
  components: {
    CyTable,
    KtButton,
    TableColumnFilterDialog,
  },
  data() {
    return {
      size: "small",
      filters: {
        pageNum: 1,
        pageSize: 10,
        supplierMnemonicCode: null,
        supplierName: null,
        status: null,
        source:null,
        purchasingMethod: null,
        startTime: null,
        endTime: null,
        merchantId: null,
      },
      merchantFilter: {
        name: null,
        orgNumber: null,
        start: 1,
        limit: 10,
      },
      supplierList: [], //供应商列表
      totalSize: 0,
      supplierListLoading: false,
      merchantList: [],
      merchantTotal: 0,
      operation: false, // true:新增, false:编辑
      editDialogVisible: false, // 新增编辑界面是否显示
      merchantListLoading: false,
      startDateDisabled:{},
      endDateDisabled:{},
    };
  },
  methods: {
    changeStartDate:function () {
        var this_= this;
        this_.endDateDisabled = {
          disabledDate: (time)=> {
            if (this_.filters.startTime){
              return time.getTime() < new Date(this_.filters.startTime).getTime();
            }
          },
        };
      },
      changeendDate:function () {
        var this_= this;
        this_.startDateDisabled = {
          disabledDate: (time)=> {
            if (this_.filters.endTime){
              return time.getTime() > new Date(this_.filters.endTime).getTime();
            }
          },
        };
      },
    addSupplier: function () {
      this.editDialogVisible = true;
      this.findPageTable();
    },
    // 换页刷新
    refreshPageRequest: function (pageNum) {
      this.filters.pageNum = pageNum;
      this.findPage();
    },
    // 换页刷新
    handleSizeChange: function (pageSize) {
      this.filters.pageSize = pageSize;
      this.filters.pageNum = 1;
      this.findPage();
    },
    // 分页查询供应商列表
    findPage: function (data) {
      let that = this;
      that.supplierListLoading = true;
      that.utils.request.supplierInformationListPage(that.filters, (res) => {
        if (res.code == "0000" && res.data.rows && res.data.rows.length > 0) {
          that.supplierList = res.data.rows;
          that.totalSize = res.data.total;
        } else {
          that.supplierList = [];
        }
        that.supplierListLoading = false;
      });
    },
    // 换页刷新
    refreshMerchantPageRequest: function (pageNum) {
      this.merchantFilter.start = pageNum;
      this.findPageTable();
    },
    // 换页刷新
    handleMerchantSizeChange: function (pageSize) {
      this.merchantFilter.start = pageSize;
      this.merchantFilter.limit = 1;
      this.findPageTable();
    },
    //查询商家列表
    findPageTable: function () {
      let that = this;
      that.merchantListLoading = true;
      that.utils.request.queryMerchantList(that.merchantFilter, (res) => {
        if (
          res.code == "0000" &&
          res.data &&
          res.data.rows &&
          res.data.rows.length > 0
        ) {
          that.merchantList = res.data.rows;
          that.merchantTotal = res.data.total;
        } else {
          that.merchantList = [];
        }
        that.merchantListLoading = false;
      });
    },
    //选中商家创建供应商
    handleCurrentChange: function (val) {     
      let that = this;
      let param = {
        id: val.id,
        merchantName: val.name,
      };
      that.utils.request.saveOrUpdateSupplierInfo(param, (res) => {       
        this.editDialogVisible = false;
        if (res.code == "0000" && res.data) {
          this.$router.push({
            path: "/AddProviderManage",
            query: {
              id: res.data,
            },
          });
        }
      });
    },
    // 显示新增界面
    handleAdd: function () {
      this.editDialogVisible = true;
      this.operation = true;
      this.resetForm("dataForm");
    },
    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
        this.filters.start_time = "";
        this.filters.end_time = "";
        this.findPage();
      }
    },
    //编辑
    handleEdit(row) {
      this.$router.push({
        path: "/AddProviderManage",
        query: {
          id: row.id,
        },
      });
    },
    //查看
    handleView(row){
      this.$router.push({
        path: "/AddProviderManage",
        query: {
          id: row.id,
          isView:1
        },
      });
    },
    //审核
    handleChangeStatus(row,status){
      this.$confirm("确认审核该供应商吗？","提示",
      {type:"info"}
      ).then(() =>{
        this.utils.request.updateSupplierInformation({id:row.id,status:status},res =>{
          if(res.code == '0000'){
            this.findPage();
            this.$message({message:"操作成功！",type:"success"});
          }
        })
      })
    },
  },
  mounted() {
    this.findPage();
  },
};
</script>

<style scoped lang="scss">
.selectshangjia {
  height: 32px;
  line-height: 32px;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}
.selectshangjia::-webkit-input-placeholder {
  color: #c0c4cc;
}
.selectshangjia::-moz-input-placeholder {
  color: #c0c4cc;
}
.selectshangjia::-ms-input-placeholder {
  color: #c0c4cc;
}
// .gongnengList .el-button--mini{
//   padding: 10px 18px;
//   font-size: 13px;
// }
// .el-button--primary.is-plain {
//   color: #2F4554;
//   background: #ffffff;
//   border-color: #b3d8ff;
// }
// .el-button--primary:hover {
//   color: #FFF;
//   background-color: #2F4554;
//   border-color: #2F4554;
// }
.h30 {
  height: 30px;
}
</style>
